<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>class</title>
    <link rel="stylesheet" href="/css/reset.css">
    <style>
        body {
            margin: 0;
        }

        .bc {
            background-image: url("../img/preview.jpg");
            background-size: 100% 100%;
            height: 100%;
            width: 100%;
        }

        .studentTable {
            border: 1px solid black;
            width: 90%;
            height: 300px;
            margin: auto;
            border-collapse: collapse;
            background-color: rgba(236, 231, 231, 0.6);
            text-align: center;
        }

        .item {
            display: flex;
            margin-left: 200px;
            margin-top: 10px;
            /*margin-bottom: 40px;*/
            padding-bottom: 40px;
        }

        .itemLeft {
            margin-left: 150px;
            line-height: 40px;
            width: 400px;
            height: 220px;
            padding: 20px;
            box-sizing: border-box;

            text-align: center;
            background-color: rgba(204, 204, 204, 0.6);
            box-shadow: 0px 0px 3px 3px rgb(16, 195, 183);
            border-radius: 15px;
            /* text-align:end; */
        }

        .itemLeft {
            text-align: initial;
            font-size: 14px;
            font-weight: bold;


        }

        .classtext {
            margin-left: 34px;
            width: 130px;
            height: 20px;
        }

        #addressText {
            margin-left: 28px;
            width: 122px;
            height: 16px;
        }
    </style>


</head>

<body>
<div class="bc">
    <div>
        <table class="studentTable" border="1">
            <thead>
            <tr style="line-height: 20px;font-size: 20px;padding-bottom: 10px">
                <th>房间地址</th>
                <th>可容纳人数</th>
                <th>已住人数</th>
                <th>房间状态</th>
                <th>房间类型</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="data">
            </tbody>
        </table>
        <p id="cutA"></p>
    </div>
    <!-- 添加房间 -->
    <div id="addRoomDiv"
         style="background-color: slateblue;border-radius: 20px;visibility: hidden;font-size: 20px;color: cyan;font-weight: bold;width: 700px;height: 400px;position:absolute;top: 50px;left: 50px;text-align: justify;padding: 20px">
        <h6 style="border: 1px solid black;margin: 0;text-align: center">添加房间信息</h6>
        <div style="display: flex;justify-content: space-between; line-height: 50px;margin-top: 20px">
            <div>
                <input type="hidden" id="studentIdText">
                <p> 房间地址：<input type="text" id="roomAddress"></p>
                <p> 房间类型：<select id="genderSelect" style="width: 80px">
                    <option value="男生宿舍">男生宿舍</option>
                    <option value="女生宿舍">女生宿舍</option>
                </select></p>

            </div>
            <div>
                <p> 可容纳人数：<input type="text" id="studentNum"></p>
                <input type="button" value="添加" onclick="addRoom();">
                <input type="button" value="取消" onclick="closeDiv('addRoomDiv')">
            </div>
        </div>
    </div>
    <!--    查看房间信息-->
    <div id="findRoomDiv"
         style="background-color: slateblue;border-radius: 20px;visibility: hidden;font-size: 20px;color: cyan;font-weight: bold;width: 700px;position:absolute;top: 50px;left: 50px;text-align: justify;padding: 20px">
        <h6 style="border: 1px solid black;margin: 0;text-align: center">查看房间信息</h6>
        <div style="justify-content: space-between; line-height: 50px;margin-top: 20px">
            <div>
                房间地址：<span id="fRoomAddress"></span>
                可容纳人数：<span id="fRoomNum"></span> <br>
                房间状态：<span id="fRoomState"></span>
                已住人数：<span id="fRoomStudentNum"></span> <br>
                房间类型：<span id="fRoomType"></span>
            </div>
            <div>
                <table border="1" width="90%">
                    <thead>
                    <tr>
                        <th>学生姓名</th>
                        <th>所在班级</th>
                        <th>联系电话</th>
                    </tr>
                    </thead>
                    <thead id="studentData">

                    </thead>

                </table>
                <input type="button" value="确定" onclick="closeDiv('findRoomDiv')">
            </div>
        </div>
    </div>
    <!--    查看设施-->
    <div id="findFacilityDiv"
         style="background-color: slateblue;border-radius: 20px;visibility: hidden;font-size: 20px;color: cyan;font-weight: bold;width: 700px;height: 400px;position:absolute;top: 50px;left: 50px;text-align: justify;padding: 20px">
        <h6 style="border: 1px solid black;margin: 0;text-align: center">房间设施维护</h6>
        <div style=" line-height: 50px;margin-top: 20px">
            <table border="1" width="90%">
                <thead>
                <tr>
                    <th>损坏描述</th>
                    <th>报损日期</th>
                    <th>是否解决</th>
                    <th>处理设施</th>
                </tr>
                </thead>
                <tbody id="facilityData"></tbody>
            </table>
            损坏描述： <textarea id="msgText">

        </textarea>
            <input type="hidden" value="" id="roomIdText">

            <input type="button" value="添加" onclick="addState()">
            <input type="button" value="返回" onclick="closeDiv('findFacilityDiv')">
        </div>
    </div>
<div id="showInfoDiv"
     style="width: 260px;height: 100px ;background-color: whitesmoke;text-align:center;line-height: 50px;
   border: 2px solid black;visibility: hidden;box-shadow: 1px 1px 3px 2px black;font-size: 16px;font-weight: bold;position: absolute;; left: 25%;top: 20%;z-index: 55;">
    <p id="showInfo"> </p>
    <input type="button" value="确认" onclick="closeDiv('showInfoDiv')">
</div>
    <div class="item">
        <!-- 入住按钮 -->
        <div>
            <button onclick="showDiv('addRoomDiv');">添加房间</button>
        </div>
        <!-- 动态查询 -->
        <div class="itemLeft">
            <div>
                房间地址： <input type="text" id="addressText" class="classtext"> <br>
                可住房间 : <select id="infoSelect" class="classtext">
                <option value="">不限</option>
                <option value="可住">可住房间</option>
            </select>
            </div>
            <div>
                可住房间 : <select id="stateSelect" class="classtext">
                <option value="">不限</option>
                <option value="正常">正常</option>
                <option value="设施损坏">设施损坏</option>
            </select><br>
                可住房间 : <select id="typeSelect" class="classtext">
                <option value="">不限</option>
                <option value="男生宿舍">男生宿舍</option>
                <option value="女生宿舍">女生宿舍</option>
            </select>
            </div>

            <button onclick="showData(1)" style="margin-left: 250px;
;">查找
            </button>

        </div>
    </div>
</div>
</body>
<script src="/js/axios.min.js"></script>
<script src="/js/query.js"></script>
<script src="/roomhtml/js/room.js"></script>

</html>